<!--<template>-->
<!--  <div-->
<!--      :class="'custom-steps&#45;&#45;'+direction"-->
<!--      :style="{'background-color': background}"-->
<!--  >-->
<!--    <slot></slot>-->
<!--  </div>-->

<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  props:{-->
<!--    active:{ //当前激活的步骤-->
<!--      type:Number,-->
<!--      default:0-->
<!--    },-->
<!--    direction:{ //容器方向-->
<!--      type:String,-->
<!--      validator(value){ //巧用validator属性，可以验证参数的输入是否合法-->
<!--        return['horizontal','vertical'].find(e => e === value) //horizontal水平 vertical垂直-->
<!--      },-->
<!--      default:'horizontal'-->
<!--    },-->
<!--    background:{ //容器背景颜色-->
<!--      type:String,-->
<!--      default:'#ffffff'-->
<!--    }-->
<!--  },-->
<!--  //provide选项允许我们指定我们想要提供给后代组件的数据/方法-->
<!--  provide() {-->
<!--    return {-->
<!--      direction: this.direction,-->
<!--      active: this.active-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style lang="scss" scoped>-->
<!--/*水平样式*/-->
<!--.custom-steps&#45;&#45;horizontal {-->
<!--  display: flex;-->
<!--}-->
<!--/*垂直样式*/-->
<!--.custom-steps&#45;&#45;vertical {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->
<!--</style>-->
